<template>
  <!-- 编辑与新增、详情为同一页面 -->
  <div class="app">
    <div class="top-div">
      <a class="a1" @click="GoBackToGoodsPermissions()">
        &lt;&nbsp;返回客户档案
      </a>
      <h3 class="h3" v-if="this.$route.query.title == 'add'">新增权限配置</h3>
      <h3 class="h3" v-if="this.$route.query.title == 'edit'">编辑权限配置</h3>
      <h3 class="h3" v-if="this.$route.query.title == 'check'">查看权限配置</h3>
    </div>
    <div class="mid-div">
      <el-form
        :disabled="this.$route.query.title == 'check'"
        class="el-form"
        ref="form"
        :model="datafilter"
        label-width="80px"
      >
        <el-form-item
          label-width="90px"
          prop="groupId"
          label="集团名称"
          :rules="[
            { required: true, message: '请输入集团名称', trigger: 'changed' },
          ]"
        >
          <el-select
            @change="changeOfGroupName"
            v-model="datafilter.groupId"
            placeholder="请选择集团"
            style="width: 225px"
          >
            <el-option
              v-for="(item, index) in optionsOfGroup"
              :label="item.name"
              :value="item.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="supplierId"
          label-width="90px"
          label="供应商名称"
          :rules="[
            { required: true, message: '请输入供应商名称', trigger: 'changed' },
          ]"
        >
          <el-select
            v-model="datafilter.supplierId"
            placeholder="请选择供应商"
            style="width: 225px"
          >
            <el-option
              v-for="(item, index) in optionsOfSupplier"
              :label="item.name"
              :value="item.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="date"
          label="日期"
          label-width="90px"
          :rules="[
            {
              required: true,
              message: '请输入日期',
              trigger: 'changed',
            },
          ]"
        >
          <el-date-picker
            v-model="datafilter.date"
            type="daterange"
            start-placeholder="生效时间"
            end-placeholder="失效时间"
            style="width: 225px"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div style="margin-left: 6.5%; margin-bottom: 20px">
        <el-button
          type="primary"
          @click="onSubmit('form')"
          v-show="this.$route.query.title != 'check'"
        >
          确定
        </el-button>
        <el-button @click="OnCancel">取消</el-button>
      </div>
    </div>
  </div>
</template>
 
<script>
import {
  getPermissionsListAdd,
  getPermissionsListEdit,
  getPermissionsSupplierList,
} from '@/api/goodsPermissions'
import { getAllGroup } from '@/api/customer/customerProfile'

export default {
  data() {
    return {
      datafilter: {
        groupId: null,
        statu: 0,
        effectTime: '',
        endTime: '',
        supplierId: '',
        date: [],
      },
      effectTimeStamp: null,
      endTimeStamp: null,
      
      optionsOfGroup: [],
      optionsOfSupplier: [],
      pickerOptions: {},
    }
  },
  computed: {},
  created() {
    this.triggerGetList()
    this.editting()
  },
  methods: {
    //集团名称select的change事件。
    changeOfGroupName() {
      this.triggerGetsupplierAll()
      this.datafilter.supplierId = ''
    },
    editting() {
      if (this.$route.query.title == 'edit') {
        this.datafilter.id = this.$route.query.editData.id
        this.datafilter.groupId = this.$route.query.editData.groupId
        this.datafilter.supplierId = this.$route.query.editData.supplierId
        //判断当列表供应商存在时 将 获取到列表数据供应商并将其转为数组。
        // this.arr = this.datafilter.supplierName
        // ? this.datafilter.supplierName.split(',')
        // : ''
        this.datafilter.date[0] = this.$route.query.editData.effectTime
        this.datafilter.date[1] = this.$route.query.editData.endTime
      } else if (this.$route.query.title == 'check') {
        this.datafilter.id = this.$route.query.checkData.id
        this.datafilter.groupId = this.$route.query.checkData.groupId
        this.datafilter.supplierId = this.$route.query.checkData.supplierId
        // this.datafilter = this.$route.query.checkData
        //判断当列表供应商存在时 将 获取到列表数据供应商并将其转为数组。
        // this.arr = this.datafilter.supplierName
        // ? this.datafilter.supplierName.split(',')
        // : ''
        // console.log((this.datafilter.supplierName).split(','),'111111111111'); //获取到列表数据供应商并将其转为数组。
        this.datafilter.date[0] = this.$route.query.checkData.effectTime
        this.datafilter.date[1] = this.$route.query.checkData.endTime
      }
    },
    OnCancel() {
      this.$router.push({
        path: '/goods/goodsPermissions',
      })
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('是否确定此操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              this.datafilter.effectTime = this.datafilter.date[0]
              this.datafilter.endTime = this.datafilter.date[1]
              const timess = new Date()
              const year = timess.getFullYear()
              const month = (timess.getMonth() + 1).toString().padStart(2, 0)
              const data = timess.getDate().toString().padStart(2, 0)
              let c = (year + '-' + month + '-' + data)
                .replace('-', '/')
                .replace('-', '/') //当前时间格式化。
              let a = this.datafilter.effectTime
                .replace('-', '/')
                .replace('-', '/') //生效时间格式化。
              let b = this.datafilter.endTime
                .replace('-', '/')
                .replace('-', '/') //失效时间格式化。
              if (c >= a && a <= b) {
                this.datafilter.statu = 1
              } else {
                this.datafilter.statu = 0
              }
              this.triggerGetPermissionsListAdd()
            })
            .catch(() => {
              this.$message.info('已取消此操作')
            })
        } else {
          return false
        }
      })
    },

    //新增接口。
    async triggerGetPermissionsListAdd() {
      
      //这里利用双重for循环,第一个循环是循环选中的数据,第二个是循环接口数据,将两者相比较,得到id.
      // this.arr.forEach((e) => {
      //   this.options01.forEach((i) => {
      //     if (e == i.name) {
      //       this.datafilter.supplierIdList = []
      //       this.datafilter.supplierIdList.push(i.id)
      //     }
      //   })
      // })
      if (this.$route.query.title == 'add') {
        const res = await getPermissionsListAdd(this.datafilter)
        if (res.status == 200) {
          this.$message.success('操作成功')
          this.$router.push({
            path: '/goods/goodsPermissions',
          })
        } else {
          this.$message.error('操作失败')
        }
      } else if (this.$route.query.title == 'edit') {
        const res = await getPermissionsListEdit(this.datafilter)
        if (res.status == 200) {
          this.$message.success('操作成功')
          this.$router.push({
            path: '/goods/goodsPermissions',
          })
        } else {
          this.$message.error('操作失败')
        }
      }
    },
    //集团名称列表。
    async triggerGetList() {
      const res = await getAllGroup()
      this.optionsOfGroup = res.data
      this.triggerGetsupplierAll()
    },
    //供应商列表数据。
    async triggerGetsupplierAll() {
      if (this.$route.query.title == 'add') {
        let addCustomerGroupid = {
          customerGroupid: this.datafilter.groupId,
        }
        const res = await getPermissionsSupplierList(addCustomerGroupid)
        this.optionsOfSupplier = res.data
      } else {
        let editCustomerGroupid = {
          customerGroupid: this.datafilter.groupId,
          id: this.datafilter.id,
        }
        const res = await getPermissionsSupplierList(editCustomerGroupid)
        this.optionsOfSupplier = res.data
      }
    },
    //路由返回。
    GoBackToGoodsPermissions() {
      this.$router.push({
        path: '/goods/goodsPermissions',
      })
    },
  },
}
</script>
 
<style scoped lang="scss">
.app {
  .top-div {
    height: 50px;
    padding: 0px 20px;
    border-bottom: 1px solid #cccc;
    .a1 {
      display: inline-block;
      direction: none;
      color: rgb(96 98 102);
    }
    .a1:hover {
      cursor: pointer;
    }
    .h3 {
      margin-left: 38%;
      display: inline-block;
    }
  }
  .mid-div {
    margin-top: 20px;
    margin-left: 20px;
    overflow: hidden;
    // display: flex;
    // justify-content: center;
  }
  .el-form {
    width: 360px;
  }
}
</style>